<template>
  <div class="right_main flexC">
    <div class="flex1 flexC fuwu">
      <div class="title flex JustifyContentSB">
        <p class="title">
          <img class="verticM" style="height: 1.125rem;padding: 0 1rem;" src="../../assets/img/data/20.png" alt="">
          <span class="colorF font_s18">监管数据</span>
        </p>
      </div>
      <div class="flex1 content flexC JustifyContentC">
        <ul class="flex flex1 textC JustifyContentSA colorF" style="margin: 1.25rem 1rem -1.5rem 1rem;">
          <li class="right_jiancha cursor" @click="inspection=true">
            <p class="font_s40" style="line-height: 3.5rem;">19</p>
            <p class="font_s18" style="line-height: 1.875rem;">检查</p>
          </li>
          <li class="right_chuzhi cursor" @click="dispose=true">
            <p class="font_s40" style="line-height: 3.5rem;">6</p>
            <p class="font_s18" style="line-height: 1.875rem;">处置</p>
          </li>
          <li class="right_zhenggai cursor" @click="reform=true">
            <p class="font_s40" style="line-height: 3.5rem;">3</p>
            <p class="font_s18" style="line-height: 1.875rem;">整改</p>
          </li>
          <li class="right_xiufu cursor" @click="restore=true">
            <p class="font_s40" style="line-height: 3.5rem;">0</p>
            <p class="font_s18" style="line-height: 1.875rem;">修复</p>
          </li>
        </ul>
        <!------------------------- 重点风险点出现次数 ------------------------->
        <div class="flexC  flex2 JustifyContentC">
          <p>
            <img class="verticM" style="height: 1.125rem;padding: 0 0.825rem 0 1.25rem;" src="../../assets/img/data/20.png" alt="">
            <span class="colorF font_s18">重点风险点出现次数</span>
          </p>
          <ul class="colorF">
            <li class="flex JustifyContentSB font_s18 cursor" @click="operationsManagement=true" style="background:rgba(239,130,100,0.75); border-radius: 6px; line-height: 1.825rem; padding: 0 1.125rem 0 1.125rem; margin: 1rem 1.125rem;">
              <span>运营管理</span>
              <span>4</span>
            </li>
            <li class="flex JustifyContentSB font_s18 cursor" @click="fireSafety=true" style="background: rgba(125,100,158,0.75); border-radius: 6px; line-height: 1.825rem; padding: 0 1.125rem 0 1.125rem; margin: 1rem 1.125rem;">
              <span>消防安全</span>
              <span>1</span>
            </li>
            <li class="flex JustifyContentSB font_s18 cursor" @click="equipment=true" style="background: rgba(148,231,183,0.75); border-radius: 6px; line-height: 1.825rem; padding: 0 1.125rem 0 1.125rem; margin: 1rem 1.125rem;">
              <span>设施设备</span>
              <span>18</span>
            </li>
            <li class="flex JustifyContentSB font_s18 cursor" @click="fireworkManagement=true" style="background: rgba(255,205,121,0.75); border-radius: 6px; line-height: 1.825rem; padding: 0 1.125rem 0 1.125rem; margin: 1rem 1.125rem;">
              <span>烟花爆竹管理</span>
              <span>1</span>
            </li>
          </ul>
        </div>
        <!------------------------- 智能监管 ------------------------->
        <div class="flexC flex1">
          <p>
            <img class="verticM" style="height: 1.125rem;padding: 0 0.825rem 0 1.25rem;" src="../../assets/img/data/20.png" alt="">
            <span class="colorF font_s16">智能监管</span>
          </p>
          <ul class="flex colorF AlignItemsC JustifyContentSB textC" style="margin: 0.625rem 1rem;">
            <li class="right_huoqing flexC JustifyContentC cursor" @click="fireCamera=true">
              <p class="font_s40 PingFangRegular">0</p>
              <p class="font_s18">火情摄像头</p>
            </li>
            <li class="right_xinfang flexC JustifyContentC cursor" @click="petition=true">
              <p class="font_s40 PingFangRegular">30</p>
              <p class="font_s18">信访舆情</p>
            </li>
            <li class="right_chengzaili flexC JustifyContentC cursor" @click="bearingCapacity=true">
              <p class="font_s40 PingFangRegular">0</p>
              <p class="font_s18">承载力预警</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!------------------------- 组件调用 ------------------------->
    <ModalPolygon01 title="日常巡查" v-if="inspection" @hidden="hidden(inspection)">
      <Inspection></Inspection>
      <Pagination :total="total"></Pagination>
    </ModalPolygon01>
    <ModalPolygon01 title="处置" v-if="dispose" @hidden="hidden(dispose)">
      <Dispose></Dispose>
      <Pagination :total="total"></Pagination>
    </ModalPolygon01>
    <ModalPolygon01 title="整改" v-if="reform" @hidden="hidden(reform)">
      <Reform></Reform>
      <Pagination :total="total"></Pagination>
    </ModalPolygon01>
    <ModalPolygon01 title="修复" v-if="restore" @hidden="hidden(restore)">
      <Restore></Restore>
      <Pagination :total="total"></Pagination>
    </ModalPolygon01>
    <ModalPolygon01 title="运营管理" v-if="operationsManagement" @hidden="hidden(operationsManagement)">
      <OperationsManagement></OperationsManagement>
      <Pagination :total="total"></Pagination>
    </ModalPolygon01>
    <ModalPolygon01 title="消防安全" v-if="fireSafety" @hidden="hidden(fireSafety)">
      <FireSafety></FireSafety>
      <Pagination :total="total"></Pagination>
    </ModalPolygon01>
    <ModalPolygon01 title="设施设备" v-if="equipment" @hidden="hidden(equipment)">
      <Equipment></Equipment>
      <Pagination :total="total"></Pagination>
    </ModalPolygon01>
    <ModalPolygon01 title="烟花爆竹管理" v-if="fireworkManagement" @hidden="hidden(fireworkManagement)">
      <FireworkManagement></FireworkManagement>
      <Pagination :total="total"></Pagination>
    </ModalPolygon01>
    <ModalPolygon01 title="信访舆情" v-if="petition" @hidden="hidden(petition)">
      <Petition></Petition>
      <Pagination :total="total"></Pagination>
    </ModalPolygon01>
    <ModalPolygon01 title="火情摄像头" v-if="fireCamera" @hidden="hidden(fireCamera)">
      <FireCamera></FireCamera>
      <Pagination :total="total"></Pagination>
    </ModalPolygon01>
    <ModalPolygon01 title="承载力预警" v-if="bearingCapacity" @hidden="hidden(bearingCapacity)">
      <BearingCapacity></BearingCapacity>
      <Pagination :total="total"></Pagination>
    </ModalPolygon01>
  </div>
</template>
<script>
// import Modal from '@/components/Modal.vue'
import ModalPolygon01 from '@/components/ModalPolygon01.vue'
import Pagination from '@/components/Pagination.vue'
import Inspection from './right/Inspection'
import Dispose from './right/Dispose'
import Reform from './right/Reform'
import Restore from './right/Restore'
import OperationsManagement from './right/OperationsManagement'
import FireSafety from './right/FireSafety'
import Equipment from './right/Equipment'
import FireworkManagement from './right/FireworkManagement'
import Petition from './right/Petition'
import FireCamera from './right/FireCamera'
import BearingCapacity from './right/BearingCapacity'

export default {
  name: 'ComRight',
  components: {
    // Modal,
    ModalPolygon01,
    Pagination,
    Inspection,
    Dispose,
    Reform,
    Restore,
    OperationsManagement,
    FireSafety,
    Equipment,
    FireworkManagement,
    Petition,
    FireCamera,
    BearingCapacity
  },
  data () {
    return {
      total: 150,
      inspection: false,
      dispose: false,
      reform: false,
      restore: false,
      operationsManagement: false,
      fireSafety: false,
      equipment: false,
      fireworkManagement: false,
      petition: false,
      fireCamera: false,
      bearingCapacity: false
    }
  },
  methods: {
    hidden: function (choose) {
      if (choose === this.inspection) {
        this.inspection = false
      }
      if (choose === this.dispose) {
        this.dispose = false
      }
      if (choose === this.reform) {
        this.reform = false
      }
      if (choose === this.restore) {
        this.restore = false
      }
      if (choose === this.operationsManagement) {
        this.operationsManagement = false
      }
      if (choose === this.fireSafety) {
        this.fireSafety = false
      }
      if (choose === this.equipment) {
        this.equipment = false
      }
      if (choose === this.fireworkManagement) {
        this.fireworkManagement = false
      }
      if (choose === this.petition) {
        this.petition = false
      }
      if (choose === this.fireCamera) {
        this.fireCamera = false
      }
      if (choose === this.bearingCapacity) {
        this.bearingCapacity = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.right_main{
  position: absolute;
  top: 15%;
  right:1rem;
  height: 50%;
  width: 25%;
  .fuwu{
    margin-bottom: 1rem;
    .title{
      line-height: 2.75rem;
      border-radius: 5px 5px 0 0;
      background: #556969;
    }
    .content{
      background: #1C1F26;
      img{
        margin-right: 0.3rem
      }
      .right_jiancha, .right_chuzhi, .right_zhenggai, .right_xiufu {
        width: 6.375rem;
        height: 6.75rem;
      }
      .right_jiancha {
        background: url(../../assets/img/comprehensive/right/01.png) no-repeat;
        background-size: 100% 80%;
      }
      .right_chuzhi {
        background: url(../../assets/img/comprehensive/right/02.png) no-repeat;
        background-size: 100% 80%;
      }
      .right_zhenggai {
        background: url(../../assets/img/comprehensive/right/03.png) no-repeat;
        background-size: 100% 80%;
      }
      .right_xiufu {
        background: url(../../assets/img/comprehensive/right/04.png) no-repeat;
        background-size: 100% 80%;
      }
      .right_huoqing, .right_xinfang, .right_chengzaili {
        width:8.375rem;
        height: 5.75rem;
      }
      .right_huoqing {
        background: url(../../assets/img/comprehensive/right/05.png) no-repeat;
        background-size: 100% 100%;
      }
      .right_xinfang {
        background: url(../../assets/img/comprehensive/right/06.png) no-repeat;
        background-size: 100% 100%;
      }
      .right_chengzaili {
        background: url(../../assets/img/comprehensive/right/07.png) no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
</style>
